<template>
    <div id="app">
        <p ref="p">数字：{{count}}</p>
        <button @click="handleClick">点击+1</button>
        <button @click="logNode">打印节点</button>
    </div>
</template>
<script>

export default {
  components:{
  },
  data(){
    return {
      count:100
    }
  },
  methods:{
    logNode(){
      const node = document.querySelector('#app')
        console.dir(node)
    },
    handleClick(){
      // 执行这一步之后，data中的count已经变化了
      this.count++
      // 假设每+1，就去更新dom
      this.count++
      // 又更新一次
      this.count++
      // 
      this.count++
      this.count++
      this.count++

      // 获取dom元素的内容，dom元素的内容还是最早的样子

      // 1. Vue是异步更新dom的， ==> Vue不会再数据修改之后，立即更新dom
      console.log(this.$refs.p.innerHTML)

      // 只有等dom内容更新之后，再获取
      setTimeout(() => {
         console.log(this.$refs.p.innerHTML)
      }, 0);

      // const p = new Promise((resolve)=>{
      //   console.log('promise')
      //   resolve()
      // })
      // p.then(() => {
      //   console.log(this.$refs.p.innerHTML)
      // })


      this.$nextTick(() => {
        // 等到dom更新之后，立马触发
        // 拿到异步更新之后的dom元素内容
        console.log(this.$refs.p.innerHTML)
      })
    }
  },

  // this.$nextTick的原理 Vue是异步更新dom的（为了优化性能）

  // promise.then ===> MutationObserver ==> setImmediate ==> setTimeout

  // 宏任务
  // 0. script
  // 1. setTimeout  / setInterval
  // 2. setImmediate

  // 微任务
  // 1. promise.then() / catch() 回到
  // 2. async await 
  // 3. MutationObserver() ==> 监听DOM的改变
  // 4. process.nextTick

}
</script>

<style>
  .box{
    border:1px solid skyblue;
    width:200px;
    height:200px;
    margin:10px;
    padding:10px
  }

</style>